---
const { image, header, class: className } = Astro.props;
---

<article
  class:list={[
    'box-border flex flex-col gap-8 justify-between lg:h-112 md:p-10 lg:p-14 p-6 bg-white md:rounded-[3.75rem] lg:rounded-[5rem] rounded-4xl',
    className,
  ]}>
  <div
    class="self-start p-3 border-2 border-special-stroke lg:rounded-3xl md:rounded-2xl rounded-xl">
    <img class="w-8 md:w-12" src={`/TypeGPU/assets/${image}.svg`} alt={image} />
  </div>
  <div>
    <h3 class="m-0 pb-3 font-normal md:pb-4 text-grayscale-100">
      {header}
    </h3>
    <p class="m-0 text-grayscale-80"><slot /></p>
  </div>
</article>
